<template>
  <div class="details" v-loading="loading">
    <div class="header">
      <div class="lint"></div>
      <div class="title">基本信息</div>
    </div>

    <div class="parallel">
      <div class="list" v-for="(item, index) in 8" :key="index">
        <div class="key">
          {{
            index == 0
              ? "订单编号"
              : index == 1
                ? "商户单号"
                : index == 2
                  ? "订单状态"
                  : index == 3
                    ? "价格"
                    : index == 4
                      ? "支付方式"
                      : index == 5
                        ? "用户昵称"
                        : index == 6
                          ? "用户手机号"
                          : index == 7
                            ? "支付时间"
                            : ""
          }}：
        </div>

        <div class="value  text-line" v-if="index != 2 || index != 4">
          {{
            index == 0
              ? commonObj.courseOrderNo
              : index == 1
                ? commonObj.courseMerchantNo
                : index == 2
                  ? ''
                  : index == 3
                    ? commonObj.price
                    : index == 4
                      ? ''
                      : index == 5
                        ? commonObj.nickname
                        : index == 6
                          ? commonObj.phone
                          : index == 7
                            ? commonObj.createTime
                            : ""
          }}
        </div>

        <div class="value" v-if="index == 2">
          <el-tag v-if="commonObj.priceType == 0">免费</el-tag>
          <el-tag v-if="commonObj.priceType == 1" type="success">付费</el-tag>
        </div>

        <div class="value" v-if="index == 4">
          <el-tag v-if="commonObj.buyType == -1" type="warning">免费获取</el-tag>
          <el-tag v-else-if="commonObj.buyType == 0" type="danger">余额</el-tag>
          <el-tag v-else-if="commonObj.buyType == 1" type="success">微信</el-tag>
          <el-tag v-else-if="commonObj.buyType == 2">支付宝</el-tag>
        </div>
      </div>
    </div>

    <div class="text"> 
        <div class="left">
          课程名称:
        </div>

        <div class="right">
          {{ commonObj.courseName }}
        </div>
    </div>
  </div>
</template>

<script>
import {
  orderCourseList
} from '@/api/order'

export default {
  data() {
    return {
      id: '',
      //-------------
      page: 1,
      limit: 10,
      loading: false,
      commonObj: {},
    };
  },
  created() {
    this.loading = true
    this.id = this.$route.query.id
    this.orderCourseListMet()
  },
  methods: {
    orderCourseListMet() {
      let params = {
        userCourseId: this.id,

        pageSize: this.limit,
        pageNo: this.page,
      }

      orderCourseList(params).then(res => {
        if (res.errorCode == null) {
          res.resultData.price = Number(res.resultData.price / 100).toFixed(2);

          this.commonObj = res.resultData;
          this.loading = false;
        }
      })
    },
  }
};
</script>


<style lang="less" scoped>
.details {
  .header {
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: #fafafa;

    .lint {
      width: 2px;
      height: 20px;
      background: rgba(255, 141, 26, 0.65);
    }

    .title {
      margin-left: 20px;
      font-size: 16px;
      color: rgba(255, 141, 26, 0.65);
    }
  }

  .parallel {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;

    .list {
      width: calc(100% / 3);
      min-height: 30px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;

      .key,
      .value {
        color: rgba(0, 0, 0, .7);
      }

      .value {
        width: 60%;
      }
    }
  }

  .text {
    display: flex;
    color: rgba(0, 0, 0, .7);

    .left {
      width: 65px;
        line-height: 25px;
    }

    .right {
      width: 80%;
      line-height: 25px;
    }
  }
}
</style>